﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="css/Table.css" rel="stylesheet" type="text/css">
    <link href="css/frame.css" rel="stylesheet" type="text/css">
    <link href="css/common.css" rel="stylesheet" type="text/css">
    <link href="css/info.css" rel="stylesheet" type="text/css">
    
   	<script src="js/jquery-1.8.1.min.js"></script>
   	<script src="js/common.js"></script>
    <script type="text/javascript">
    	var pageNo = 1;
	    $(window).load(function(){
	    	loadPageData(pageNo);
	    });
	    
	    function loadPageData(pageNum){
			pageNo = pageNum;
	        $.ajax({
	    		type : 'GET',
	    		url : 'get_diag_system_hist.cgi?page='+pageNum,
	    		dataType : "json",
	    		error:function(){
	    			alert("서버 접속에 실패하였습니다. 다시시도해주세요.");
	    		},
	    		success:function(data){
	    			var combo = $('#content_combo_list');
	    			if(!checkParameter(combo.html())){
	    				setComboList(data.totalCnt)
	    			}
	    			setPageList(data.items);
	    		}
	    	});
	    }
	    
	    function setComboList(count){
			var pageCnt = 25;
			var pageNum = 0;
			var opList = '';
			while(count > pageNum * pageCnt){
				var start = (pageNum * pageCnt) + 1;
				var end = (pageNum + 1) * pageCnt;
				if(pageNum == 0){
					opList += '<li class="hover"><input name="c" id="c0" class="option" type="radio" value="'+pageNum+'" checked="checked"><label for="c0" onclick="javascript:loadPageData('+pageNum+');">시스템 이력 '+start+'-'+end+'</label></li>';
				}else{
					opList += '<li class=""><input name="c" id="c'+pageNum+'" class="option" type="radio" value="'+pageNum+'"><label for="c'+pageNum+'" onclick="javascript:loadPageData('+pageNum+');">시스템 이력 '+start+'-'+end+'</label></li>';
				}
				pageNum++;
			}
			$('#content_combo_list').html(opList);
	    	setSelectComboBox();
	    }
	    
	    
	    function setPageList(items){
	    	$('.table_list').scrollTop(0);
			var list = $('#content_table_list');
			list.html('');
			var trList = '';
			var num = false;
			for(var i = 0; i < items.length; i++){
				var data = items[i];
				var cellStyle = '';
				if(num == true){
					cellStyle = 'class="bg_tr"';
				}
				trList += '<tr '+cellStyle+' onclick="">';
				trList += '<td>'+data.pNo+'</td>';
				trList += '<td>'+data.pDate+'</td>';
				trList += '<td>'+data.pTime+'</td>';
				trList += '<td style="text-align:left;">'+data.pEvent+'</td>';
				trList += '</tr>';
				num = !num;
			}
			list.html(trList);
	    }
	    
    	function selectReplace(){
    		loadPageData(pageNo);
    	}
    </script>
  </head>
  
  <body>
	  <div id="frame">
	  	<div id="frame_Title">
	  		<div class="content_tb"><div class="content_cell"><b>시스템 이력</b></div></div>
	  		<ul class="table_replace" style="height:30px;">
				<li><div class="content_tb"><div class="content_cell">새로고침 :</div></div></li>
				<li><img src="images/reflesh.png" onclick="javascript:selectReplace();"></li>
			</ul>
	  	</div>
	      <div id="frame_box">
	      	<div class="table_tollBar">
	      		<div class="select_tb" style="width:auto;"><div class="select_cell">
					<div class="select" style="width:200px;">
						<span class="ctrl"><img src="images/arrow.png" class="arrow"></span>
						<div class="myValue"></div>
						<ul class="iList" id="content_combo_list" style="position: absolute;"></ul>
					</div></div>
				</div>
	      	</div>
		      	<div class="list_table">
		      		<div class="table_header">
			          <table cellspacing="0">
			            <colgroup>
			              <col width="5%">
			              <col width="20%">
			              <col width="20%">
			              <col width="55%">
			            </colgroup>
			            <thead>
			              <tr>
			                <th scope="col">No</th>
			                <th scope="col">날짜</th>
			                <th scope="col">시간</th>
			                <th scope="col">내용</th>
			              </tr>
			            </thead>
			          </table>
		          	</div>
		          <div class="table_list">
		            <table cellspacing="0">
		              <colgroup>
			              <col width="5%">
			              <col width="20%">
			              <col width="20%">
			              <col width="55%">
		              </colgroup>
		              <tbody id="content_table_list">
		              </tbody>
		            </table>
		          </div>
		      	</div>
	      	</div>
	</div>
  </body>
